import { useMemo, useState } from "react";

function fib(n) {
  console.log("计算函数执行了");
  if (n < 3) return 1;
  return fib(n - 2) + fib(n - 1);
}

function App() {
  const [count1, setCount1] = useState(0);
  // 返回计算结果，只有当count1变化时才计算 fib(count1)
  const result = useMemo(() => fib(1), [count1]);
  /* 状态数据发生变化组件重新渲染时也会执行 fib(count1)
  const result = fib(count1); */
  const [count2, setCount2] = useState(0);
  console.log("组件重新渲染了");
  return (
    <>
      <div>result:{result}</div>
      <button onClick={() => setCount1(count1 + 1)}>+count1:{count1}</button>
      <button onClick={() => setCount2(count2 + 1)}>+count2:{count2}</button>
    </>
  );
}

export default App;
